<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>form展现处理示例</title>
		<script type="text/javascript" src="/baseproject/js/jquery-1.6.2.js"></script>
		<script type="text/javascript" src="/baseproject/js/baseui/ui/jquery-ui.js"></script>
		<script type="text/javascript" src="/baseproject/js/plugin/powertip/powertip-jquery.js"></script>
		<script type="text/javascript" src="/baseproject/js/plugin/powertip/jquery.pnotify.js"></script>
		
		<link href="/baseproject/css/basethemes/themes/base/jquery-ui.css" 	rel="stylesheet" type="text/css" />
		<link href="/baseproject/css/component/form/idealForms.css"	rel="stylesheet" type="text/css" />
		<link  href="/baseproject/css/component/form/idealForms-theme-sapphire.css"	rel="stylesheet" type="text/css" />
		<link href="/baseproject/css/common/together.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" href="/baseproject/css/plugin/powertip/powre-float-common.css" type="text/css" />
		<link rel="stylesheet" href="/baseproject/css/plugin/powertip/powerFloat.css" type="text/css" />
		<link rel="stylesheet" href="/baseproject/css/plugin/powertip/gobal-tooltip.css" type="text/css" />
		
	</head>
	<body>
<form>
	<table class="form_table_layout">
		<tr >
			<th colspan="6" height="30" class="form_table_title">编辑资料</th>
			<input type="hidden" id="checkCodeRe" value="false" />
		</tr>
		<tr class="form_table_tr">
			<td class="td_01">
					姓&nbsp;&nbsp;名:
			</td>
			<td class="td_02" colspan="2">
				<div class="idealWrap">
				<input type="text" id="textName"/>
			   </div>
			</td>
			
			<td class="td_01">
					昵&nbsp;&nbsp;称:
			</td>
			<td class="td_02" colspan="2">
			<div class="idealWrap">
				<input type="text" id="textNiceName"/>
			</div>
			</td>
		</tr>
		<tr>
			<td class="td_01">
					密&nbsp;&nbsp;码:
			</td>
			<td class="td_02" colspan="2">
			<div class="idealWrap">
				<input type="password" />
			</div>
			</td>
			<td class="td_01">
					职业选择:
			</td>
			<td class="td_02" colspan="2">
			<div class="idealSelect">
				<select id="options" title="请选择">
					<option>
						博士后
					</option>
					<option>
						博士
					</option>
					<option>
						硕士
					</option>
					<option>
						大学本科
					</option>
					<option>
						大专
					</option>
					<option>
						其他
					</option>
				</select>
			</div>
			</td>
		</tr>
		<tr>
			<td class="td_01">
					爱好选择:
			</td>
			<td class="td_02" colspan="2">
			<div class="idealWrap">
					<label>
						<input type="checkbox" name="checks" />
						男
					</label>
					<label>
						<input type="checkbox" name="checks" />
						女
					</label>
					<label>
						<input type="checkbox" name="checks" />
						运动
					</label>
			</div>
			</td>
			<td class="td_01">
					性&nbsp;&nbsp;别:
			</td>
			<td class="td_02" colspan="2">
			<div class="idealWrap">
					<label>
						<input type="radio" name="radios" checked />
						男
					</label>
					<label>
						<input type="radio" name="radios" />
						女
					</label>
			</div>
			</td>
		</tr>
		
		<tr >
			<td class="td_01">
					备&nbsp;&nbsp;注:
			</td>
			<td class="td_02" colspan="2">
			<div class="idealWrap">
				<textarea id="textareaRemark1"></textarea>
			</div>
			</td>
			
			<td class="td_01">
					备&nbsp;&nbsp;注:
			</td>
			<td class="td_02" colspan="2">
			<div class="idealWrap">
				<textarea id="textareaRemark2"></textarea>
			</div>
			</td>
		</tr>
		<tfoot>
			<tr class="td_02">
				<td colspan="6" align="right">
				<div class="idealWrap" style="padding-right:30px;">
				<label>
					&nbsp;
				</label>
				<input type="button" id="but" value="提&nbsp;&nbsp;交" onclick="showTip();"/>
				<label>
					&nbsp;
				</label>
				<input type="button" id="but" value="提info示" onclick="javascript:$.pnotify({pnotify_text:'用户姓名必须输入\n用户名称不能为空\n请输入', pnotify_title:'温馨提示'});"/>
				<label>
					&nbsp;
				</label>
				<input type="button" id="but" value="提warn示" onclick="javascript:$.pnotify({pnotify_text:'用户姓名必须输入\n用户名称不能为空\n请输入', pnotify_title:'温馨提示',pnotify_type:'warn'});"/>
				<label>
					&nbsp;
				</label>
				<input type="button" id="but" value="提error示" onclick="javascript:$.pnotify({pnotify_text:'用户姓名必须输入\n用户名称不能为空\n请输入', pnotify_title:'温馨提示',pnotify_type:'error'});"/>
				<label>
					&nbsp;
				</label>
				<input type="button" id="but" value="提help示" onclick="javascript:$.pnotify({pnotify_text:'用户姓名必须输入\n用户名称不能为空\n请输入', pnotify_title:'温馨提示',pnotify_type:'help'});"/>
				<label>
					&nbsp;
				</label>
				<input type="submit" value="Submit" />
			</div>
				</td>
			</tr>
		</tfoot>
	</table>
	</form>
	
<style>
.tip_err_div{
	background-image: url(/baseproject/images/plugin/gobal-tip/Critical.png) !important;
}

</style>
<a class="tooltip" href="#">Critical
 </a>
<div id="tipError" class="custom critical tooltip_span" style="display:none;" >
 <img style="" alt="Error" src="/baseproject/images/plugin/gobal-tip/Warning.png" class="tooltip_img">
 <div style="cursor: pointer;" class="ui-pnotify-closer"><span class="ui-icon ui-icon-circle-close"></span></div>
 <em class="tooltip_em">温馨提示</em>
 <span class="ui-pnotify-text">用户姓名必须输入<br>用户名称不能为空
请输入</span>
 </div>
 <img style="display:none" id="testImage" alt="Error" src="/baseproject/images/plugin/gobal-tip/Critical.png" class="tooltip_img">
	</body>
	<script type="text/javascript">
<!--
	function showTip(){
	$("#testImage").show().animate({"width": "28", "opacity": 1}, "fast");
	
		$("#tipError").show().animate({ opacity: 'show' }, "slow",   "easein"); ;
		//var objTipError = document.getElementById('tipError');
		//objTipError.style.display = "block";
		//objTipError.x = document.body.clientWidth - 260;
		//objTipError.y = document.body.offsetHeight - 20;
	}

	$(function() {
		//通过默认rel属性加载
		$("#textName").powerFloat();
		
		//指定对象显示提示信息
	var fnPosTri = function() {
		var oPosTri = $("#textareaRemark1"), vPosTri = $.trim(oPosTri.val());
		if (vPosTri === "") {
			oPosTri.powerFloat({
				tipid : 'textareaRemark1',
				eventType: null,
				targetMode: "remind",
				target: "输入内容不能为空！",
				position: "1-4"
			});
		} else if (/\W/g.test(vPosTri)) {
			oPosTri.powerFloat({
				eventType: null,
				tipid : 'textareaRemark1',
				targetMode: "remind",
				target: "只能输入英文字符、数字和下划线",
				position: "1-4"
			});	
		} else {
			$.powerFloat.hide();
		}
	};
	$("#textareaRemark1").bind("click", fnPosTri);
	$("#textareaRemark1").bind("blur", fnPosTri);
	
	var fnPosTri2 = function() {
		var oPosTri = $("#textareaRemark2"), vPosTri = $.trim(oPosTri.val());
		if (vPosTri === "") {
			oPosTri.powerFloat({
				tipid : 'textareaRemark2',
				eventType: null,
				targetMode: "remind",
				target: "输入内容不能为空！",
				position: "1-4"
			});
		} else if (/\W/g.test(vPosTri)) {
			oPosTri.powerFloat({
				eventType: null,
				tipid : 'textareaRemark2',
				targetMode: "remind",
				target: "只能输入英文字符、数字和下划线",
				position: "8-6"
			});	
		} else {
			$.powerFloat.hide();
		}
	};
	$("#textareaRemark2").bind("click", fnPosTri2);
	$("#textareaRemark2").bind("blur", fnPosTri2);
	
	});
	
-->
</script>
</html>